<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>医生主操作界面</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../layuiadmin/layui/layui.js"></script>
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <!--分页需要的样式开始-->
    <style>
        /*分页*/
        .page-bar {
            margin: 40px auto;
            margin-top: 150px;

        }

        ul, li {
            margin: 0px;
            padding: 0px;
        }

        li {
            list-style: none
        }

        .page-bar li:first-child > a {
            margin-left: 0px
        }

        .page-bar a {
            border: 1px solid #ddd;
            text-decoration: none;
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #5D6062;
            cursor: pointer;
            margin-right: 20px;
        }

        .page-bar a:hover {
            background-color: #eee;
        }

        .page-bar a.banclick {
            cursor: not-allowed;
        }

        .page-bar .active a {
            color: #fff;
            cursor: default;
            background-color: #E96463;
            border-color: #E96463;
        }

        .page-bar i {
            font-style: normal;
            color: #d44950;
            margin: 0px 4px;
            font-size: 12px;
        }
    </style>
    <!--分页需要的样式结束-->
</head>
<body>
<div id="app">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="height: 100px">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">住院编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="inpaientId" v-model="conditionParam.inpatientId" placeholder="请输入"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">患者姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="inpatientName" v-model="conditionParam.inpatientName" placeholder="请输入"
                               autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">家属姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="inpatientFamlilyName" v-model="conditionParam.inpatientFamlilyName"
                               placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">联系电话</label>
                    <div class="layui-input-block">
                        <input type="text" name="inpatientFamlilyTel" v-model="conditionParam.inpatientFamlilyTel"
                               placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-forum-list" lay-submit
                            lay-filter="LAY-app-forumlist-search" @click="getData">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">

            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>患者名字</th>
                    <th>入院时间</th>
                    <th>出院时间</th>
                    <th>家属姓名</th>
                    <th>联系电话</th>
                    <th>医生名字</th>
                    <th colspan="2">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in list">
                    <td>{{item.patient.patientName}}</td>
                    <td v-text="dateFormat(item.inDate,'yyyy-MM-dd hh:mm:ss')"></td>
                    <td v-text="dateFormat(item.outDate,'yyyy-MM-dd hh:mm:ss')"></td>
                    <td>{{item.inpatientFamlilyName}}</td>
                    <td>{{item.inpatientFamlilyTel}}</td>
                    <td>{{item.empDoc.empName}}</td>
                    <td>
                        <a href="#" @click="todcoAdvice(index)" class="layui-btn">医嘱详情</a>
                        <a href="#" @click="toInpatient(index)" class="layui-btn">患者详情</a>
                    </td>
                </tr>
                </tbody>
            </table><br/>
            <!--分页开始-->
            <div class="page-bar" style="margin-top: 10px">
                <ul>
                    <li v-if="page.pageNum>1"><a v-on:click="page.pageNum--,pageClick()">上一页</a></li>
                    <li v-if="page.pageNum==1"><a class="banclick">上一页</a></li>
                    <li v-for="index in page.navigatepageNums" v-bind:class="{ 'active': page.pageNum == index}">
                        <a v-on:click="btnClick(index)">{{ index }}</a>
                    </li>
                    <li v-if="page.pageNum!=page.pages"><a v-on:click="page.pageNum++,pageClick()">下一页</a></li>
                    <li v-if="page.pageNum == page.pages"><a class="banclick">下一页</a></li>
                    <li><a>共<i>{{page.pages}}</i>页</a></li>
                </ul>
            </div>
            <!--分页结束-->
        </div>
    </div>

</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            list: [],
            conditionParam: {
                inpatientId: '',
                inpatientName: '',
                inpatientFamlilyName: '',
                inpatientFamlilyTel: '',
            },
            page: {
                pageNum: 1,//开始页数
                pageSize: 5,//每页显示条数
                pages: 1,//总页数
                navigatepageNums: []//所有的导航页码
            }
        },
        created() {
            //生命周期函数，已初始化就调用加载数据方法
            this.getData()
        },
        methods: {
            pageClick: function () {
                this.getData();
            },
            btnClick: function (index) {
                this.page.pageNum = index;
                this.getData();
            },
            //获取查询条件参数
            getConditionParams: function () {
                let params = "?";
                let i = 0;
                if (this.conditionParam.inpatientId) {
                    i++;
                    params += "inpatientId=" + this.conditionParam.inpatientId + "&";
                }
                if (this.conditionParam.inpatientName) {
                    i++;
                    params += "inpatientName=" + this.conditionParam.inpatientName + "&";
                }
                if (this.conditionParam.inpatientFamlilyName) {
                    i++;
                    params += "inpatientFamlilyName=" + this.conditionParam.inpatientFamlilyName + "&";
                }
                if (this.conditionParam.inpatientFamlilyTel) {
                    i++;
                    params += "inpatientFamlilyTel=" + this.conditionParam.inpatientFamlilyTel + "&";
                }
                return params;
            },
            getData: function () {
                var that = this;
                axios.get("http://localhost:8080/inpatient/getInpatientList" + this.getConditionParams() + "pageNum=" + this.page.pageNum).then(function (resp) {
                    that.list = resp.data.data.list;
                    that.page.pageNum = resp.data.data.pageNum;
                    that.page.pageSize = resp.data.data.pageSize;
                    that.page.pages = resp.data.data.pages;
                    that.page.navigatepageNums = resp.data.data.navigatepageNums;
                });
            },
            toInpatient: function (index) {
                location.href = "inpatient.html?inpatientId=" + this.list[index].inpatientId;
            },
            todcoAdvice: function (index) {
                location.href = "docAdvice.html?inpatientId=" + this.list[index].inpatientId;
            },
            dateFormat: function (value, fmt) {
                let getDate = new Date(value);
                let o = {
                    'M+': getDate.getMonth() + 1,
                    'd+': getDate.getDate(),
                    'h+': getDate.getHours(),
                    'm+': getDate.getMinutes(),
                    's+': getDate.getSeconds(),
                    'q+': Math.floor((getDate.getMonth() + 3) / 3),
                    'S': getDate.getMilliseconds()
                };
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (getDate.getFullYear() + '').substr(4 - RegExp.$1.length))
                }
                for (let k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) {
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                    }
                }
                return fmt;
            }
        }
    })
</script>
</body>
</html>